<template>
    <div
        class="group-buy-entrance"
        @click="goGroupDetail"
        v-if="groupList.length>0"
    >
        <div class="group-buy-title">
            <span class="group-buy">每周拼团</span>
            <span class="group-buy-sub">520臻情献礼</span>
            <span class="group-buy-more">查看更多></span>
        </div>
        <swiper
            :options="swiperOption"
            ref="mySwiper"
            style="padding: 10px 0"
            v-if="isShow"
        >
            <swiper-slide
                class="swiper-slide"
                v-for="(item,index) of groupList"
                :key="index"
            >
                <div class="goods-item">
                    <div class="goods-img-box">
                        <img
                            class="goods-img"
                            :src="item.imgs[0].title_img"
                        />
                    </div>
                    <div class="goods-name">{{item.title}}</div>
                    <div class="goods-price-box">
                        <div class="goods-now-price">￥{{item.price_master | currency}}</div>
                        <div class="goods-normal-price">￥{{item.price_market | currency}}</div>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import RemainTime from '@/pages/GroupBuy/components/RemainTime'
export default {
    name: 'GroupBuy',
    components: {
        RemainTime
    },
    data() {
        return {
            isShow: true,
            swiperOption: {
                loop: false,
                slidesPerView: 'auto',
                spaceBetween: 10,
                observer: true,
                onClick: () => {}
            },
            groupList: []
        }
    },
    mounted() {
        this.getGroupList()
    },
    methods: {
        getGroupList() {
            this.axios.post('/api/group_buy/activity_list.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.groupList = data.data.list
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goGroupDetail() {
            this.$router.push('/groupBuy')
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    },
    activated() {
        this.isShow = true
    },
    deactivated() {
        this.isShow = false
    }
}
</script>

<style lang="stylus" scoped>
.group-buy-entrance
    padding 0.42rem 0.4rem 0 0.4rem
    background #fff
    .group-buy-title
        display flex
        align-items baseline
        .group-buy
            font-size 0.4rem
            color #000
        .group-buy-sub
            flex 1
            font-size 0.32rem
            color #333
            padding 0 0.18rem
        .group-buy-more
            font-size 0.28rem
            color #666
    .group-buy-time
        display flex
        justify-content center
        margin-top 0.18rem
        font-size 0.37rem
        color #666
        text-align center
    .swiper-slide
        width 2.91rem
        .goods-item
            width 2.91rem
            .goods-img-box
                width 2.91rem
                height 2.91rem
                border 1px solid #e5e5e5
                box-sizing border-box
                overflow hidden
                .goods-img
                    width 100%
            .goods-name
                margin-top 0.18rem
                display -webkit-box
                -webkit-box-orient vertical
                overflow hidden
                -webkit-line-clamp 2
                word-break break-all
                line-height 0.5rem
                height 0.98rem
                font-size 0.32rem
                color #333
            .goods-price-box
                display flex
                justify-content space-between
                align-items baseline
                margin-top 0.18rem
                .goods-now-price
                    font-size 0.39rem
                    color #d7463c
                .goods-normal-price
                    font-size 0.29rem
                    color #999
</style>
